<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
	pageContext.setAttribute("path", request.getContextPath());
%>
<link rel="stylesheet"
	href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript"
	src="${path }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${path }/static/js/jquery-1.12.4.min.js"></script>

</head>
<body>


<!-- Modal -->
<div class="modal fade" id="empAddmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal end-->

	<div class="container">
		<!-- 第一行 -->
		<div class="row">
			<div class="col-md-12">
				<h1></h1>
				SSM
			</div>
		</div>
		<!-- 第er行 -->
		<div class="row">
			<div class="col-md-12 col-md-offset-8">
				<button class="btn btn-primary" id="emp_add_modl_btn">添加</button>
				<button class="btn btn-warning">删除</button>
			</div>
		</div>
		<!-- 第san行 -->

		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
				<thead>
					<tr>
						<th>员工编号</th>
						<th>员工姓名</th>
						<th>性别</th>
						<th>邮箱</th>
						<th>所属部门</th>
						<th>操作</th>
					</tr>
					</thead>
<tbody>

</tbody>
				</table>

			</div>
		</div>
	<!-- 第si行 -->	
	
		<div class="row">
		<div class="col-md-6" id="page_info_area"></div>
		<div class="col-md-6" id="page_info_nav"></div>		
	</div>
	<script type="text/javascript">
	
	$(function(){
		toPage(1);
	});
	function toPage(pn) {
		$.ajax({
			url : "${path }/emps",
			data : "pn=" + pn,
			type : "GET",
			success : function(result) {
				build_emps_table(result);
				build_page_info(result);
				build_page_nav(result);
			}
		});
	}
	
	
	
	function build_emps_table(result){
		$("#emps_table tbody").empty();
		var emps=result.extend.pageinfo.list;
		
		$.each(emps,function(index,item){
			var empIdTD=$("<td></td>").append(item.empId);
			var empNameTD=$("<td></td>").append(item.empName);
			var genderTD=$("<td></td>").append(item.gender=='M'?"男":"女");
			var emailTD=$("<td></td>").append(item.email);
			var deptNameTD=$("<td></td>").append(item.department.deptName);
			var editBtn=$("<button></button>").addClass("btn btn-primary").append("编辑");
			var delBtn=$("<button></button>").addClass("btn btn-danger").append("删除");
			
			
			$("<tr></tr>").append(empIdTD)
			.append(empNameTD)
			.append(genderTD)
			.append(emailTD)
			.append(deptNameTD)
			.append(editBtn)
			.append(delBtn)
			.appendTo("#emps_table tbody");
		});
		
	}
	
	function build_page_info(result){
		$("#page_info_area").append("当前"+result.extend.pageinfo.pageNum+"页，总"+result.extend.pageinfo.pages+"页，共"+result.extend.pageinfo.total+"条");
		} 
	
	function build_page_nav(result){
		
		var ul=$("<ul></ul>").addClass("pagination")
		var fistPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
		var perPageLi=$("<li></li>").append($("<a></a>").append("&laquo;"));
		if(result.extend.pageinfo.hasPreviousPage==false){
			fistPageLi.addClass("disabled");
			perPageLi.addClass("disabled");
		}
		var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;"));
		var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
		if(result.extend.pageinfo.hasNextPage==false){
			nextPageLi.addClass("disabled");
			lastPageLi.addClass("disabled");
		}
		ul.append(fistPageLi).append(perPageLi);
		$.each(result.extend.pageinfo.navigatepageNums,function(index,item){
			var num=$("<li></li>").append($("<a></a>").append(item));
			
			if(result.extend.pageinfo.pageNum==item){
				num.addClass("active");
			}
			num.click(function() {
				toPage(item);
			});
			
			ul.append(num);
		})
	    
		ul.append(nextPageLi).append(lastPageLi);
		var navEle=$("<nav></nav>").append(ul);
		navEle.appendTo("#page_info_nav"); 
	} 
	
	$("#emp_add_modl_btn").click(function(){
		$('#empAddmodal').modal({
			backdrop:static;
		});
		
	});
	
	</script>
</body>
</html>